<template>
  <div v-loading="loading" style="width:100%;margin:auto">
    <el-card style="width:60rem;margin:auto">
      <template #header>
        <div style="display:flex;align-items:center">
          <span>当前筛选：</span>
          <Company v-model="query.company" style="margin-right:0.5rem" />
          <PartyGroup v-model="query.group" />
        </div>
      </template>
      <el-collapse v-model="activePanel">
        <el-collapse-item name="panel-filter">
          <template #title>
            <h2
              v-if="!activePanel.find(i=>i=='panel-filter')"
              class="flashing-alert"
            >点击此处，对{{ generateTitle($route.meta) }}筛选</h2>
            <h2 v-else>{{ generateTitle($route.meta) }}</h2>
          </template>
          <el-form label-width="5rem" inline>
            <el-form-item label="操作">
              <el-button type="success" icon="el-icon-refresh" @click="requireRefresh">刷新</el-button>
            </el-form-item>
            <el-form-item label="党内分工">
              <PartyDutySelector v-model="query.duty" :multi="false" />
            </el-form-item>
            <el-form-item label="政治面貌">
              <TypeInPartySelector v-model="query.typeInParty" :multi="false" />
            </el-form-item>
            <el-form-item label="党团组织">
              <PartyGroupSelector v-model="query.group" :code.sync="query.company" />
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item name="panel-table">
          <template #title>
            <h2>名册列表({{ list.length }}条记录)</h2>
          </template>
          <Table
            :list="list"
            :data.sync="data"
            :page.sync="page"
            :total-count="totalCount"
            @requireRefresh="requireRefresh"
            @requireEdit="handleEdit([data.userName])"
          />
        </el-collapse-item>
        <el-collapse-item name="panel-flow">
          <template #title>
            <h2>发展流程情况({{ validRecordsCount }}条记录)</h2>
          </template>
          <el-alert type="success">点击步骤展开详情，单击用户头像选中用户，双击用户头像查看此用户历史。</el-alert>
          <JoinSteps
            v-loading="loadingUser"
            :user-party-infos="userPartyInfos"
            @requireEdit="handleEdit"
          />
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-dialog title="党员发展编辑" :visible.sync="showEditContent">
      <StepContent :users="waitToEditUsers" @requireRefresh="requireRefresh" />
    </el-dialog>
  </div>
</template>
<script>
import { getList } from '@/api/zzxt/party-userinfo'
import { getStatistics } from '@/api/zzxt/party-join'
import { generateTitle } from '@/utils/get-page-title'
import { debounce } from '@/utils'
export default {
  name: 'PartyJoin',
  components: {
    Table: () => import('./Table'),
    StepContent: () => import('./StepContent'),
    PartyDutySelector: () =>
      import('@/components/Party/PartyDuty/PartyDutySelector'),
    PartyGroupSelector: () =>
      import('@/components/Party/PartyGroup/PartyGroupSelector'),
    TypeInPartySelector: () =>
      import('@/components/Party/TypeInParty/TypeInPartySelector'),
    JoinSteps: () => import('./JoinSteps'),
    Company: () => import('@/components/Company/CompanyFormItem'),
    PartyGroup: () => import('@/components/Party/PartyGroup')
  },
  data: () => ({
    activePanel: ['panel-table'],
    query: {
      company: null,
      group: null,
      duty: null,
      typeInParty: null,
      currentStep: null
    },
    loading: false,
    loadingUser: false,
    list: [],
    userPartyInfos: [],
    data: {},
    showEditContent: false,
    waitToEditUsers: [],
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0
  }),
  computed: {
    validRecordsCount() {
      const cb = (prev, cur) => prev + (cur.step ? cur.count : 0)
      return this.userPartyInfos.reduce(cb, 0)
    },
    partyJoinStepsDict() {
      return this.$store.state.partyJoin.partyJoinStepsDict
    },
    requireRefresh() {
      return debounce(() => {
        this.refreshAndHideEdit()
      }, 2e2)
    },
    currentCompany() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    page: {
      handler(val) {
        this.requireRefresh()
      },
      deep: true
    },
    query: {
      handler(val) {
        this.requireRefresh()
      },
      deep: true
    },
    currentCompany: {
      handler(val) {
        if (val) this.query.company = val
      },
      deep: true
    }
  },
  mounted() {
    this.$store.dispatch('partyJoin/initDictionary')
  },
  methods: {
    generateTitle,
    handleEdit(users) {
      debugger
      this.waitToEditUsers = users
      this.showEditContent = true
    },
    refreshAndHideEdit() {
      this.refresh()
      this.showEditContent = false
    },
    build_payload() {
      const { query, page } = this
      const payload = Object.assign(query, { page })
      return payload
    },
    refresh() {
      const p = this.build_payload()
      this.refreshList(p)
      this.refreshUser(p)
    },
    refreshList(payload) {
      if (this.loading) return
      this.loading = true
      const callback = data => {
        this.list = data.list
        this.totalCount = data.totalCount
      }
      payload = payload || this.build_payload()
      getList(payload)
        .then(callback)
        .finally(() => {
          this.loading = false
        })
    },
    refreshUser(payload) {
      if (this.loadingUser) return
      this.loadingUser = true
      const callback = data => {
        this.userPartyInfos = data.list
      }
      payload = payload || this.build_payload()
      getStatistics(payload)
        .then(callback)
        .finally(() => {
          this.loadingUser = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/animation';
</style>
